<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我的祖宗
            <ol>
                <li>文嬴政</li>
                <li>文世民</li>
                <li>文刘彻</li>
            </ol>
        </li>
        <li>我的同事
            <ol>
                <li>文克龙</li>
                <li>文化腾</li>
                <li>文冬梅</li>
            </ol>
        </li>
        <li>我的小弟
            <ol>
                <li>文特勒</li>
                <li>文大林</li>
                <li>陈吉尔</li>
            </ol>
        </li>
    </ul>
    <script src="./js/jquery.min.js"></script>
    <script>
        //默认隐藏所有的li
        $("ol li").hide();
        //点击的就是ul下面的li
        $("ul li").click(function(){
            /* 让点击的那个li里面的元素给展开 */
            $(this).find("ol li").toggle()

            //展开的那个,让兄弟都要隐藏起来
            $(this).siblings().find("ol li").hide();
        })
    </script>
</body>
</html>